<!-- * 文件名：查询input
* 作者：ZQK
* 描述：〈描述〉
* 修改人：ZQK
* 修改时间：2024-12-25  -->
<template>
	<view class="inputBox">
		<u-icon name="search" class="searchIcon"></u-icon>
		<!--       placeholderStyle="color: #B9915F;" -->
		<input
			class="input"
			type="text"
			v-model="modelValue"
			confirm-type="search"
			@confirm="confirm"
			:placeholder="palceholder" />

		<view class="inputBtn" @click="confirm">搜索</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, defineModel } from 'vue'
	const modelValue = defineModel()
	const props = defineProps({
		palceholder: {
			type: String,
			default: '请输入'
		},
	})

	const emits = defineEmits(['change', 'confirm'])

	watch(
		() => modelValue,
		(val) => {
			if (val) {
				emits('change', val.value)
			}
		},
		{
			// immediate: true,
			deep: true
		}
	)

	const confirm = (val : any) => {
		emits('confirm', val.detail.value)
	}

	const handleChange = (val : string) => {
		console.log(val)
	}

	let palceholder = ref<string>('')
	watch(
		() => props.palceholder,
		(val) => {
			if (val) {
				palceholder.value = val
			}
		},
		{
			immediate: true,
			deep: true
		}
	)
// onMounted(() => {
//   palceholder.value = props.palceholder
// })
</script>

<style lang="scss" scoped>
	.inputBox {
		height: 76rpx;
		width: 100%;
		padding-left: 14rpx;
		background-color: #fff;
		background-size: 100% 100%;
		border-radius: 100rpx;
		color: #646464;
		position: relative;
		display: flex;
		align-items: center;

		.searchIcon {
			margin-left: 16rpx;
			margin-right: 10rpx;
		}

		.input {
			width: 80%;
		}
		
		.inputBtn{
			background-color: #5EB847;
			width: 160rpx;
			height: 60rpx;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			margin-right: 20rpx;
			letter-spacing: 8rpx;
			font-size: 32rpx;
		}
	}
</style>